<template>
  <div>
    <component :is="mainView" :ref="mainView" style="height: calc(100% - 60px)" v-on:isShowKeyBoard='isFooter'>
    </component>
    <!--  菜单区域  -->
    <div class="footer" v-if="showFooter">
      <div v-for='(item,index) of items' :key="index" :class='[item.cls,{on:index === idx}]'
           @click="change(item,index)">
        <img :src="index===idx?item.srcSelect:item.src">
        <span :class="['colorChange',{on:index===idx}]">{{ item.name }}</span>
      </div>
    </div>
    <!--  数字键盘区域  -->
    <KeyBoard ref="keyBoard" v-if="showKeyboard"></KeyBoard>
    <DaySelectView ref="dateSelect" v-on:myDateSelect='myDateSelect' :viewFrom="viewFrom">
    </DaySelectView>
  </div>
</template>

<script>

import detailView from "@/views/mingxi/DetailView.vue";
import myInfoView from "@/views/myInfo/MyInfoView.vue";
import accountView from "@/views/jizhang/AccountView.vue";
import dateSelectView from "@/views/common/DaySelectView.vue"
import {getNowFormatDate} from "@/utils/common";
import DaySelectView from "@/views/common/DaySelectView.vue";
import accountApi from "@/api/accountApi";
import { EventSourcePolyfill } from "event-source-polyfill";
import router from "@/router";
import messageApi from "@/api/messageApi";
import KeyBoard from "@/components/KeyBoard.vue";

export default {
  name: 'indexView',
  components: {
    KeyBoard,
    DaySelectView,
    "detailView": detailView,
    "accountView": accountView,
    "myInfoView": myInfoView,
    "dateSelectView": dateSelectView,
  },
  data() {
    return {
      accountViewType: '',
      viewFrom: '',
      showKeyboard: false,
      showFooter: true,
      itemName: "",
      itemId: "",
      remark: "",
      amount: "",
      num1: "",
      num2: "",
      op: "",
      active: null,
      mainView: 'detailView',
      idx: 0,
      items: [{
        idx: 0,
        cls: "detail",
        name: "明细",
        component: "detailView",
        src: require('@/assets/icons/png/detail.png'),
        srcSelect: require("@/assets/icons/png/detailing.png")
      },
        {
          idx: 1,
          cls: "account",
          name: "记账",
          component: "accountView",
          src: require('@/assets/icons/png/account.png'),
          srcSelect: require("@/assets/icons/png/accounting.png")
        },
        {
          idx: 2,
          cls: "myInfo",
          name: "我的",
          component: "myInfoView",
          src: require('@/assets/icons/png/myInfo.png'),
          srcSelect: require("@/assets/icons/png/myInfoing.png")
        }]
    }
  },
  watch: {
    "mainView": function () {
      if (this.mainView === 'accountView') {
        this.showFooter = false
      } else {
        this.showFooter = true
      }
    }
  },
  created() {
    // 检查路由参数，如果显示myInfoView，则更新mainView
    if (this.$route.params.itemView === '0') {
      this.change(this.items[0], 0);
    } else if(this.$route.params.itemView === '1') {
      this.change(this.items[1],1)
    } else if(this.$route.params.itemView === '2') {
      this.change(this.items[2],2)
    }
    this.createSseConnect();
  },
  methods: {
    // 建立连接
    createSseConnect() {
      let messageId;
      if (window.EventSource) {
        const url = "http://127.0.0.1:8080"
        const userId = window.localStorage.getItem("userId");
        const token = window.localStorage.getItem("token");
        const eventSource = new EventSourcePolyfill(`${url}/sse/createSseConnect?userId=${userId}`, {
          // 设置重连时间
          heartbeatTimeout: 5 * 60 * 1000 * 60,
          // 设置请求头
          headers: {
            'token': `${token}`,
          },
        });
        console.log(eventSource)

        eventSource.onmessage = (event) => {
          if (event.data) {
            let data = JSON.parse(event.data);
            messageId = data.messageId;
            console.log(data)
            let message = '<p>'+data.messageContent + '<span style="color:#0066ff;cursor:pointer" @click="showEveryDay">查看详情</span></p>'
            this.showMyMessage("每日小计",message);
            // 更新已读状态
            const param = {
              messageId: messageId,
              userId: userId
            };
            messageApi.readMessage(param) .then((res) => {

            })
          }
        };

        // eventSource.onopen = (event) =>{
        //   console.log("onopen:"+": "+event)
        // };

        eventSource.close = (event) => {
          console.log("close :" + ": " + event)
        };

      } else {
        console.log("当前设备不支持")
      }
    },
    showMyMessage(title,message) {
      const notify = this.$notify({
        title: title,
        dangerouslyUseHTMLString: true,
        message: message,
        duration: 0
      });
      notify.$el.querySelector('span').onclick = () => {
        router.push("/message");
        notify.close();
      };
    },
    change(item) {
      this.idx = item.idx;
      this.mainView = item.component
      this.$nextTick(() => {
        this.$forceUpdate(); // 强制更新 DOM，应用新的样式
      });
    },
    isFooter(data) {
      if (data) {
        this.showFooter = false;
        this.showKeyboard = true;
        this.itemName = data.name;
        this.itemId = data.typeId;
        this.$nextTick(()=> {
          this.$refs.keyBoard.itemName = data.name;
          this.$refs.keyBoard.itemId = data.typeId;
        })
      }
    },
    myDateSelect(data) {
      if (data) {
        this.$refs.keyBoard.lists[3].label = data;
        this.$refs.keyBoard.lists[3].image = "";
      }
      this.$refs.dateSelect.isShow = false;
      this.$refs.dateSelect.isShow1 = false;
    },
    /**
     * 回调明细页面方法
     */
    hddetailView() {
      this.$refs[this.mainView].afterPickJzrq()
    },
    openDatePicker() {
      if (this.$refs.dateSelect.isShow) {
        this.$refs.dateSelect.isShow = false;
        this.$refs.dateSelect.isShow1 = true;
      } else if (this.$refs.dateSelect.isShow1) {
        this.$refs.dateSelect.isShow = true;
        this.$refs.dateSelect.isShow1 = false;
      } else {
        this.$refs.dateSelect.isShow = true;
      }
    },
    cancelAccount() {
      this.mainView = 'detailView'
      this.idx = 0
      this.showKeyboard = false
      this.accountViewType = ''
    },
    alterIcon(item) {
      this.mainView = 'accountView'
      this.accountViewType = 'alterIcon'
      this.$nextTick(() => {
        this.$refs['accountView'].alterIconItem = item
      })

    }
  }
}

</script>

<style scoped>
.footer {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  background: rgb(235, 235, 235);
  width: 100%;
  height: 60px;
}

.keyboard {
  background-color: #ffffff;
  width: 100%;
  display: flex;
  position: fixed;
  flex-wrap: wrap; /* 允许子元素换行 */
  left: 0;
  bottom: 0;
  //height: 200px;
  box-sizing: border-box;
  box-shadow: 0 0 5px 1px #999
}

.footer div {
  flex: 1;
  padding: 5px;
}

.footer div img {
  width: 30px;
  height: 30px;
}

.footer div span {
  display: block;
  color: rgb(168, 168, 168);
}

.exit {
  width: 20px;
  height: 20px;
  padding: 10px 30px 20px 20px;
}

.itemName {
  width: 80px;
  padding: 10px 20px 20px 20px;
  height: 20px;
  color: rgb(251, 219, 68);
}

.kbInput {
  width: 170px;
  padding: 0 0 0 25px;
}

.numberIcon {
  width: 20px;
  height: 20px;
  color: rgb(251, 219, 68);
}

.on {
  color: black;
  font-weight: bolder;
}

.el-notification.right{
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}



.number {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px;
}

.number .numberitem {
  height: 2.64533333rem;
  box-sizing: border-box;
  border-top: 4px solid #F4F4F4;
  border-right: 4px solid #F4F4F4;
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-bar {
  display: flex;
  align-items: center; /* 垂直居中（如果需要的话） */
  padding: 0 !important;
  background-color: #f0f0f0;
  position: relative; /* 设置为相对定位，以便子元素可以使用绝对定位 */
}

.menu-item {
  /* 菜单项样式 */
  max-height: 50px;
  background-color: white;
  border: none;
  padding: 3px 20px;
  cursor: pointer;
  outline: none;
  border-radius: 5px;
  margin: 0 5px; /* 菜单项之间的间距 */
}

.main-button-wrapper {
  position: absolute; /* 绝对定位 */
  left: 50%; /* 水平居中，但稍后我们会通过transform来调整位置 */
  transform: translateX(-50%); /* 向左移动自身宽度的50%，以实现真正的水平居中 */
  bottom: 10px; /* 向下移动，突出半个圆的高度（假设圆形直径为60px，则半径为30px） */
  max-height: 70px;
}
/* 如果需要，可以添加hover效果来增强用户体验 */
.main-button:hover {
  /* 更改box-shadow颜色或样式以创建hover效果 */
  box-shadow: 0 -3px 0 0 rgb(100, 100, 100) inset;
}

.main-button {
  /* 圆形主按钮样式 */
  background-color: white;
  color: white;
  border-radius: 50%;
  width: 60px; /* 圆形直径 */
  max-height: 60px; /* 与宽度相同以形成圆形 */
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  /* 使用box-shadow来模拟只有上半圆的边框 */
  box-shadow: 0 1px 0 0 rgb(195, 194, 194) inset;
}
.menu-bar-container {
  border-top: 1px solid rgb(232, 231, 231);
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 50px;
  /* 如果需要，可以添加一些内边距或外边距来调整位置 */
}

.menu-bar {
  max-height: 50px;
  display: flex;
  align-items: center;
  padding: 10px 0; /* 移除水平padding，因为我们将通过margin在菜单项之间添加间距 */
  background-color: white;
  position: relative; /* 以便子元素可以使用绝对定位 */
}

/* 其他样式和悬停效果可以根据需要添加 */
</style>
